<template>
  <div class="app-container home">
    <!-- <lun-bo></lun-bo> -->
    <hero></hero>
    <!-- 这是首页111 -->
    <div class="desc-box">
      <!-- <div  class="desc">
      石家庄信策科技有限公司成立于2020年，位于石家庄，是一家以技术创新为核心驱动力的数字化解决方案服务商。<br/>
      深耕技术推广服务、软件开发、系统集成及行业应用创新，业务覆盖智慧城市、工业互联网、数字政务、安防工程等多领域，<br/>
      并延伸至多元化产品供应链支持，形成“技术+服务+资源”三位一体的核心竞争力。
      </div> -->

      <div class="service-box banner">
        <div class="title">“技术+服务+资源”三位一体的核心竞争力</div>
        <!-- <h2 class="title">我们的服务</h2> -->
        <div class="service-grid">
          <div class="service-card">
            <img src="../../assets/xc-img/xitong.png" alt="">
            <h3>系统集成</h3>
            <p>提供一站式的计算机信息系统集成服务。</p>
          </div>
          <div class="service-card">
            <img src="../../assets/xc-img/soft.png" alt="">
            <h3>软件开发</h3>
            <p>定制化软件开发，满足您的独特需求。</p>
          </div>
          <div class="service-card">
            <img src="../../assets/xc-img/zixun.png" alt="">
            <h3>技术咨询</h3>
            <p>解决网络建设、网络安全等问题，提升企业的信息化水平</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务 -->
    <div class="sever">
      <div class="sever-title">为每一位客户提供高品质的服务</div>
      <div class="sever-box df jcsb">
        <div class="sever-detail" v-for="(item, index) in severList" :key="index">
          <div class="num">{{ item.num }}</div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import hero from '../../components/hero/hero.vue';
export default {
  components: { hero },
  name: "Index",
  data() {
    return {
      // 版本号
      version: "1.0.0",
      iconActiveId: 2,
      // pictitle: '系统集成',
      // icontitle: '系统集成',
      // tabsList: [
      //   {id: 1, title: '技术推广', icon: require('@/assets/xc-img/ico_01.png'), iconOn: require('@/assets/xc-img/ico_01_on.png')},
      //   {id: 2, title: '系统集成', icon: require('@/assets/xc-img/ico_02.png'), iconOn: require('@/assets/xc-img/ico_02_on.png')},
      //   {id: 3, title: '技术咨询', icon: require('@/assets/xc-img/ico_06.png'), iconOn: require('@/assets/xc-img/ico_06_on.png')},
      //   {id: 4, title: '消防设备', icon: require('@/assets/xc-img/ico_04.png'), iconOn: require('@/assets/xc-img/ico_04_on.png')},
      //   {id: 5, title: '办公用品', icon: require('@/assets/xc-img/ico_05.png'), iconOn: require('@/assets/xc-img/ico_05_on.png')},
      //   {id: 6, title: '销售与维修', icon: require('@/assets/xc-img/ico_03.png'), iconOn: require('@/assets/xc-img/ico_03_on.png')},
      // ],
      // homePicList: [
      //   {id: 1, title: '技术推广', picUrl: require('@/assets/xc-img/home_03.png'), content: '信策科技专注于将最新的科技成果转化为实际应用，通过技术推广服务帮助企业和个人提高工作效率和生活质量。我们不仅提供技术咨询，还致力于技术转让和技术推广，确保客户能够充分利用前沿技术。'},
      //   {id: 2, title: '系统集成', picUrl: require('@/assets/xc-img/home_02.png'), content:'我们提供一站式的计算机信息系统集成服务，包括系统设计、配置、安装和维护。无论是企业资源规划（ERP）系统还是客户关系管理（CRM）系统，信策科技都能提供定制化的解决方案，满足不同规模企业的需求。'},
      //   {id: 3, title: '技术咨询', picUrl: require('@/assets/xc-img/home_01.png'), content:'在这个信息爆炸的时代，信策科技提供专业的互联网信息技术咨询服务，帮助客户解决网络建设、数据管理、网络安全等问题，提升企业的信息化水平。'},
      //   {id: 4, title: '消防设备', picUrl: require('@/assets/xc-img/home_04.png'), content:'安全是我们最关心的问题之一。信策科技销售各种消防设备，包括灭火器、消防栓、烟雾探测器、应急照明系统等。我们还提供消防系统的安装、维护和检测服务，确保客户的安全防护体系始终处于最佳状态。'},
      //   {id: 5, title: '办公用品', picUrl: require('@/assets/xc-img/home_06.png'),content:'我们的办公用品系列包括各类文具、办公设备、打印耗材和会议用品等。信策科技致力于提供高效、便捷的办公解决方案，帮助企业和个人提高工作效率。我们还提供定制服务，为客户打造具有企业特色的办公用品套装。'},
      //   {id: 6, title: '销售与维修', picUrl: require('@/assets/xc-img/home_05.png'),content:'我们销售各类计算机软硬件及辅助设备、办公自动化设备、安防设备等，并提供专业的维修服务。信策科技确保您购买的每一件产品都能得到最好的性能和最长的使用寿命。'}
      // ],
      severList: [
        { name: '服务客户', num: '100+' },
        { name: '技术咨询', num: '70+' },
        { name: '技术推广', num: '80%' },
        { name: '客户满意', num: '99%' }
      ]
    };
  },
  methods: {
    // 点击图标
    iconhand(icon) {
      console.log(icon);
      this.iconActiveId = icon.id
      // console.log(this.iconActiveId);
      this.icontitle = icon.title
    }
  }
};
</script>

<style scoped lang="scss">
.home {

  // .hero-content {
  //   padding-top: 100px;
  //   width: 100%;
  //   height: 600px;
  //   background-color: #007BFF;
  // }
  .content {

    .main {
      p {
        text-align: center;
        color: #333333;
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        font-size: 40px;
        margin: 98px 0 85px;
      }

      .icon_item {
        // 图片居中对齐
        text-align: center;

        .icon {
          display: block;
          margin: 0 auto;
        }

        .iconOn {
          display: none;
        }

        .subtitle {
          color: #31322C;
          font-family: Microsoft YaHei;
          font-size: 20px;
          margin: 9px 0 0 0;
        }
      }

      // 动态添加类名
      .iconActive {
        .icon {
          display: none;
        }

        .iconOn {
          display: block;
          margin: 0 auto;
        }

        .subtitle {
          color: #c00000;
          font-family: Microsoft YaHei;
          font-size: 20px;
          margin: 9px 0 0 0;
        }
      }
    }

    .introduce {
      margin: 50px 0 100px;
      height: 460px;

      // border: 1px solid pink;
      img {
        //height: 460px;
        //width: auto;
        max-width: 100%;
        height: 460px;
      }

      .explain {
        border: 1px solid green;
        flex: 1;
        height: 100%;
        background: #c00000;
        padding: 50px 30px;
        color: #FFFFFF;

        .explain-title {
          border-bottom: 1px solid #FFFFFF;
          height: 100px;
          text-align: left;
          line-height: 100px;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          font-size: 40px;
        }

        .explain-content {
          margin: 24px 0;
          color: #FFE1E1;
          font-family: Microsoft YaHei;
          font-size: 16px;
          line-height: 200%;
        }
      }
    }
  }

  .desc-box {
    .desc {
      padding: 60px;
      color: #7F7F7F;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
    }

    .service-box {
      margin-bottom: 60px;
      margin-top: 80px;

      .title {
        color: #31322C;
        font-family: Alimama ShuHeiTi;
        font-weight: bold;
        text-align: center;
        font-size: 40px;
        margin-bottom: 72px;
      }

      .service-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;

        .service-card {
          background: white;
          padding: 2rem;
          border-radius: 10px;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
          text-align: center;
          text-align: center;

          h3 {
            font-weight: bold;
          }

          // .service-card i {
          //   font-size: 2.5rem;
          //   color: #007bff;
          //   margin-bottom: 1rem;
          // }
        }
      }
    }
  }

  .sever {
    height: 468px;
    background: url('../../assets/xc-img/homeNum.png');
    padding: 80px 100px;

    .sever-title {
      text-align: center;
      color: #31322C;
      font-family: Alimama ShuHeiTi;
      font-weight: bold;
      font-size: 40px;
    }

    .sever-box {
      margin-top: 100px;

      .sever-detail {
        text-align: center;

        .num {
          color: #333333;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          font-size: 64px;
        }

        .name {
          font-family: Microsoft YaHei;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
